<template>
  <div
    class="flex justify-between"
    style="height: 100vh; width: 100vw">
    <div class="p-4 bg-[#f0f3f6]">
      <div class="flex justify-center w-44 items-center font-bold">
        <Logo />
        <span class="font-title text-xl font-bold ml-2">SC工具箱</span>
      </div>
      <div class="h-8"></div>
      <!-- 菜单 -->
      <ul class="list-none flex flex-col space-y-2">
        <li
          class="rounded-[0.5rem] p-1.5 my-0.5 shadow-none flex items-center"
          :class="
            activate == index ? 'bg-blue-500 text-white' : 'text-[#787f8d] hover:bg-[#e4e8ec]'
          "
          v-for="(el, index) in homemenu"
          :key="index"
          @click="activate = index">
          <component :is="activate == index ? el.activateicon : el.icon" />
          <span class="ml-1">{{ el.text }}</span>
        </li>
      </ul>
    </div>

    <div class="w-full bg-slate-50">
      <!-- 顶栏 -->
      <div
        id="title-bar"
        @mousedown="startDrag"
        @mouseup="stopDrag"
        @mousemove="onMouseMove"
        class="flex w-full h-10 justify-between items-center">
        <div></div>
        <div class="flex items-center">
          <button class="bg-transparent m-2">
            <Menu />
          </button>
          <button
            class="bg-transparent m-2"
            @click="minimizeWindow">
            <MinWindow />
          </button>
          <button
            class="bg-transparent m-2"
            @click="setWindow">
            <SelectWindow v-if="maxwindow" />
            <MaxWindow v-else />
          </button>
          <button
            class="bg-transparent m-2"
            @click="closeWindow">
            <Exit />
          </button>
        </div>
      </div>
      <!-- 启动 -->
      <div class="flex w-full p-4 pywebview-drag-region rounded-[0.5rem]">
        <Start />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { Logo, Menu, MaxWindow, MinWindow, SelectWindow, Exit } from '@/icon'
  import { ref, onMounted } from 'vue'
  import { pyqtapi } from '@/pyqtapi'
  import { homemenu } from '@/data/menuList'
  import Start from '@comps/start.vue'

  const isDragging = ref(false)
  const startX = ref(0)
  const startY = ref(0)
  const windowStartX = ref(0)
  const windowStartY = ref(0)

  const maxwindow = ref(false)
  const activate = ref(0)

  onMounted(() => {
    if (!pyqtapi) return console.log('error')
    // 注册监听
    pyqtapi.filspath.connect((result: any) => {
      console.log(result)
    })
    pyqtapi.addResult.connect((result: any) => {
      a.value = result
      c.value = b.value + Number(result)
      b.value = Number(c.value)
    })
  })

  function minimizeWindow() {
    pyqtapi.minimizeWindow()
  }
  function setWindow() {
    pyqtapi.toggleWindow()
    maxwindow.value = !maxwindow.value
  }
  function closeWindow() {
    pyqtapi.closeWindow()
  }
  function startDrag(event: MouseEvent) {
    isDragging.value = true
    startX.value = event.screenX
    startY.value = event.screenY
    windowStartX.value = window.screenX
    windowStartY.value = window.screenY
  }
  function stopDrag() {
    isDragging.value = false
  }
  function onMouseMove(event: MouseEvent) {
    if (isDragging.value) {
      const dx = event.screenX - startX.value
      const dy = event.screenY - startY.value

      // Move the window
      pyqtapi.moveWindow(windowStartX.value + dx, windowStartY.value + dy)
    }
  }

  // 测试

  const a = ref(0)
  const b = ref(0)
  const c = ref(0)

  // Add event listeners for dragging
  document.addEventListener('mouseup', stopDrag)
  document.addEventListener('mousemove', onMouseMove)
</script>

<style scoped>
  .activate {
    fill: #fff;
  }
</style>
